{% extends 'base.html' %}
{% block content %}
<div class="card" style="max-width:900px;margin:30px auto;padding:30px 40px;box-shadow:0 2px 12px #eee;border-radius:12px;">
  <h2 style="margin-bottom:24px;">选择续费卡</h2>
  <form method="get" action="" class="form-inline" style="margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;">
    <input type="hidden" name="customer_id" value="{{ customer_id }}">
    <input type="text" name="q" value="{{ query }}" placeholder="卡号查询" class="form-control" style="width:180px;">
    <button type="submit" class="btn btn-info">查询</button>
  </form>
  <form method="post" action="{% url 'renew_confirm' %}">
    {% csrf_token %}
    {% if customer_id %}
      <input type="hidden" name="customer_id" value="{{ customer_id }}">
    {% endif %}
    <table class="table table-bordered table-hover" style="background:#fff;">
      <thead class="thead-light">
        <tr>
          <th style="width:40px;"><input type="checkbox" id="select_all" onclick="toggleAll(this)"></th>
          <th>卡号</th>
          <th>套餐</th>
          <th>到期时间</th>
        </tr>
      </thead>
      <tbody>
      {% for card in page_obj %}
        <tr>
          <td><input type="checkbox" name="card_ids" value="{{ card.id }}"></td>
          <td>{{ card.iccid }}</td>
          <td>{{ card.packageName }}<input type="hidden" name="packages" value="{{ card.packageName }}"></td>
          <td>{{ card.packageTime }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    <div style="margin:18px 0;display:flex;align-items:center;justify-content:space-between;">
      <div>
        <span>共 <b>{{ page_obj.paginator.count }}</b> 条</span>
        <span style="margin-left:16px;">第 <b>{{ page_obj.number }}</b> / {{ page_obj.paginator.num_pages }} 页</span>
        <label style="margin-left:24px;">每页显示:
          <select name="page_size" onchange="window.location.href='?page=1&page_size='+this.value+'&q={{ query }}{% if customer_id %}&customer_id={{ customer_id }}{% endif %}'" class="form-control" style="width:80px;display:inline-block;">
            {% for size in sizes %}
            <option value="{{ size }}" {% if page_size == size %}selected{% endif %}>{{ size }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
      <div>
        {% if page_obj.has_previous %}
          <a href="?page={{ page_obj.previous_page_number }}&page_size={{ page_size }}&q={{ query }}{% if customer_id %}&customer_id={{ customer_id }}{% endif %}" class="btn btn-outline-secondary btn-sm">上一页</a>
        {% endif %}
        {% if page_obj.has_next %}
          <a href="?page={{ page_obj.next_page_number }}&page_size={{ page_size }}&q={{ query }}{% if customer_id %}&customer_id={{ customer_id }}{% endif %}" class="btn btn-outline-secondary btn-sm">下一页</a>
        {% endif %}
      </div>
    </div>
    <button type="submit" class="btn btn-success" style="width:120px;">下一步</button>
  </form>
</div>
<script>
function toggleAll(source) {
  checkboxes = document.getElementsByName('card_ids');
  for(var i=0;i<checkboxes.length;i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>
{% endblock %}
